<template>
	<view class="bg">
		<tt-bar leftIcon="icon-back" title="申请客服介入"></tt-bar>
		<view class="refuseBox">
			<!-- <view class="regionBox refuseReason" @tap="chooseReson">
				<text class="regionTitle">协商原因</text>
				<text class="refuseText">{{typeText}}</text>
				<text class="iconfont icon-right"></text>
			</view> -->
			<!-- <view class="regionBox refusePrice">
				<text class="regionTitle">协商金额：</text>
				<input type="number" placeholder="点击输入协商金额" v-model="amout" />
			</view> -->
			<view class="regionBox">
				<text class="regionTitle">申请说明</text>
				<view class="regionCnt">
					<textarea class="refuseDetail" placeholder="请填写申请说明" v-model="reason"></textarea>
					<text class="photoText">上传凭证</text>
					<view class="uploadImg">
						
						<view class="imgBox" v-for="(item,index) in selectImgList" :key="index" v-if="isShow">
							<text class="iconfont icon-guanbi2fill" @tap.stop="delImg(index)"></text>
							<image :src="item" @tap="replaceImg(index)"></image>
						</view>
						<view class="upBtn" @tap="selectImg" v-if="selectImgList.length<5">
							<text class="iconfont icon-xiangji"></text>
							<text class="btnText">上传图片</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="orderDtBtnGroup">
			<button @tap="pBack">取消返回</button>
			<button class="active" @tap="refuse">提交申请</button>
		</view>
	</view>
</template>

<script>
	
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
				orderId:'',
				refundId:'',
				selectImgList:[],
				isShow:true,
				reason:'',
			};
		},
		methods:{
			// 选择图片
			selectImg(){
				let _this=this
				let _count=6-_this.selectImgList.length;
				uni.chooseImage({
				    count: _count, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						console.log(res);
						let _allCount=_this.selectImgList.length+res.tempFilePaths.length;
						if(_allCount>6){
							uni.showToast({
								title: '最多只能上传6张照片',
								icon: 'none'
							});
						}else{
							let _overSize=res.tempFiles.every((x)=>{
								return x.size<=3145728
							})
							if(_overSize){
								if(_this.selectImgList.length>0){
									_this.selectImgList=_this.selectImgList.concat(res.tempFilePaths)
								}else{
									_this.selectImgList=res.tempFilePaths;
								}
								console.log(_this.selectImgList);
							}else{
								uni.showToast({
									title: '图片不能超过3M',
									icon: 'none'
								});
							}
							
						}
						
				    }
				});
			},
			// 替换图片
			replaceImg(e){
				let _this=this;
				let _index=parseInt(e);
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						let _overSize=res.tempFiles.every((x)=>{
							return x.size<=3145728
						})
						if(_overSize){
							_this.selectImgList[_index]=res.tempFilePaths[0];
							_this.isShow=false;
							_this.isShow=true;
						}else{
							uni.showToast({
								title: '图片不能超过3M',
								icon: 'none'
							});
						}
				    }
				});
			},
			// 删除图片
			delImg(e){
				let _index=parseInt(e);
				this.selectImgList.splice(_index,1)
			},
			
			// 提交申请
			refuse(){
				let _this=this;
				if(!this.reason){
					uni.showToast({
						title: '请填写申请说明',
						icon: 'none'
					});
				}else if(_this.selectImgList.length<1){
					uni.showToast({
						title: '请至少长传一张凭证',
						icon: 'none'
					});
				}else{
					let upArr=[];
					_this.selectImgList.forEach(function(x){
						upArr.push({uri:x,name:'file'})
					})
					uni.showLoading({
						title: '图片上传中...',
						mask: false
					});
					API.uploadImg(upArr).then(res=>{
						let _postImg=[];
						res.forEach(function(item){
							_postImg.push({
								type:1,
								url:item
							})
						})
						API.applyIntervention({
							orderId: _this.orderId,
							refundId: _this.refundId,
							operId: _this.userInfo.userId,
							status: 7,
							reason:_this.reason,
							resList:_postImg
						
						}).then(res => {
							uni.hideLoading();
							uni.showToast({
								title: '申请客服介入成功',
								icon: 'none'
							});
							uni.$emit("rfdtSX")
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						})
						
					})
				}
				
			}
		},
		onLoad(cfm) {
			this.orderId=parseInt(cfm.orderId) ;
			this.refundId=parseInt(cfm.refundId) ;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.bg{
		background-color: #f6f6f6;
	}
	.refuseBox {
		margin-top: 20upx;
		.refusePrice{
			flex-direction: row;
			align-items: baseline;
			padding: 50upx 32upx;
			input{
				font-size: 32upx;
			}
			.regionTitle {
				padding: 0;
			}
		}
		.refuseReason {
			flex-direction: row;
			align-items: baseline;
			padding: 50upx 32upx;

			.regionTitle {
				padding: 0;
			}

			.refuseText {
				font-size: 26rpx;
				color: #9e9d9d;
				flex-grow: 1;
				text-align: right;
			}

			.iconfont {
				font-size: 28upx;
				color: #9e9d9d;
			}
		}
	}

	.refuseDetail {
		width: 100%;
		height: 250upx;
		border-radius: 7rpx;
		border: solid 1rpx #cccccc;
		font-size: 28upx;
		padding: 10upx;
		box-sizing: border-box;
	}

	.photoText {
		display: inline-block;
		margin-top: 28upx;
		font-size: 28rpx;
		color: #ffa71d;
		margin-bottom: 10upx;
	}

	.uploadBtn {
		height: 175rpx;
		border-radius: 7rpx;
		border: dashed 3rpx #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30upx;

		.iconfont {
			font-size: 60upx;
			color: #b2b2b2;
		}

		text {
			margin-top: 10upx;
			font-size: 25rpx;
			color: #b2b2b2;
		}
	}
	.uploadImg {
		display: flex;
		flex-wrap: wrap;
	
		.imgBox {
			width: 180upx;
			height: 180upx;
			position: relative;
			margin-right: 20upx;
			margin-bottom: 20upx;
	
			image {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}
	
			.iconfont {
				position: absolute;
				top: -16upx;
				right: -16upx;
				font-size: 40upx;
				color: #ff3d3d;
				z-index: 3;
			}
		}
	
		.upBtn {
			width: 180upx;
			height: 180upx;
			box-sizing: border-box;
			border-radius: 10upx;
			border: 1rpx dashed #cccccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #b2b2b2;
			margin-bottom: 20upx;
	
			.iconfont {
				font-size: 60upx;
			}
	
			.btnText {
				font-size: 28upx;
			}
		}
	}
	.orderDtBtnGroup {
		position: fixed;
		width: 100%;
		height: 132upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 99;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20upx;
		button {
			margin: 0;
			width: 206rpx;
			height: 64rpx;
			border-radius: 32upx;
			background-color: rgba(0,0,0,0);
			font-size: 34upx;
			line-height: 58upx;
			color: #767676;
			border: 3upx solid #767676;
			margin-left: 24upx;
		}
		button:after{
			border: none;
		}
		.active{
			border: 3upx solid #ffa71d;
			color: #ffa71d;
		}
	}
</style>
